<template>
  <div>
    <div v-if="widget.type === 'button'" style="text-align: center;margin: 10px;">
      <el-button :type="widget.options.buttonType" :size="widget.options.buttonSize" @click="refreshView(widget.options.bindList)">{{ widget.options.buttonName }}</el-button>
    </div>
    <div v-if="widget.type === 'title'">
      <h4 v-if="widget.options.position === 'left'" :style="{color: widget.options.fontColor, fontSize: widget.options.fontSize + 'px'}" style="text-align:left;">{{ widget.options.defaultValue }}</h4>
      <h4 v-if="widget.options.position === 'right'" :style="{color: widget.options.fontColor, fontSize: widget.options.fontSize + 'px'}" style="text-align:right">{{ widget.options.defaultValue }}</h4>
      <h4 v-if="widget.options.position === 'center'" :style="{color: widget.options.fontColor, fontSize: widget.options.fontSize + 'px'}" style="text-align:center">{{ widget.options.defaultValue }}</h4>
    </div>
    <div v-if="widget.type === 'divider'">
      <el-divider />
    </div>
    <div v-if="widget.type === 'chart'" :style="{height: widget.options.chartHeight + 'px'}">
      <img v-if="widget.options.chartUrl === ''" src="@/assets/chart/data_source.png" style="height: 100%;" class="image" alt="">
      <img v-if="widget.options.chartUrl !== ''" :src="widget.options.chartUrl" style="height: 100%;" class="image" alt="">
    </div>
    <div v-if="widget.type === 'report'" style="text-align: center" :style="{height: widget.options.reportHeight + 'px'}">
      <img src="@/assets/report/report.png">
      <p v-if="widget.options.reportName !== ''" class="temp-menu-item-title">{{ widget.options.reportName }}</p>
    </div>
    <div v-else>
      <el-form-item v-if="widget.type !== 'title' && widget.type !== 'divider' && widget.type !== 'chart' && widget.type !== 'report' && widget.type !== 'button'" :label="widget.name" :prop="widget.model">
        <template v-if="widget.type === 'input'">
          <el-input
            v-if="widget.options.dataType === 'number' || widget.options.dataType === 'integer' || widget.options.dataType === 'float'"
            v-model.number="dataModel"
            type="number"
            :placeholder="widget.options.placeholder"
            :style="{width: widget.options.width}"
            :disabled="widget.options.disabled"
            clearable
          />
          <el-input
            v-else
            v-model="dataModel"
            :type="widget.options.dataType"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            :style="{width: widget.options.width}"
            clearable
          />
        </template>

        <template v-if="widget.type === 'textarea'">
          <el-input
            v-model="dataModel"
            type="textarea"
            :rows="5"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            :style="{width: widget.options.width}"
            clearable
          />
        </template>

        <template v-if="widget.type === 'number'">
          <el-input-number
            v-model="dataModel"
            :style="{width: widget.options.width}"
            :step="widget.options.step"
            controls-position="right"
            :disabled="widget.options.disabled"
          />
        </template>

        <template v-if="widget.type === 'radio'">
          <el-radio-group
            v-model="dataModel"
            :style="{width: widget.options.width}"
            :disabled="widget.options.disabled"
          >
            <el-radio
              v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
              :key="index"
              :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
              :label="item.value"
            >
              <template v-if="widget.options.remote">{{ item.label }}</template>
              <template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
            </el-radio>
          </el-radio-group>
        </template>

        <template v-if="widget.type === 'checkbox'">
          <el-checkbox-group
            v-model="dataModel"
            :style="{width: widget.options.width}"
            :disabled="widget.options.disabled"
          >
            <el-checkbox

              v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
              :key="index"
              :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
              :label="item.value"
            >
              <template v-if="widget.options.remote">{{ item.label }}</template>
              <template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
            </el-checkbox>
          </el-checkbox-group>
        </template>

        <template v-if="widget.type === 'time'">
          <el-time-picker
            v-model="dataModel"
            :is-range="widget.options.isRange"
            :placeholder="widget.options.placeholder"
            :start-placeholder="widget.options.startPlaceholder"
            :end-placeholder="widget.options.endPlaceholder"
            :readonly="widget.options.readonly"
            :disabled="widget.options.disabled"
            :editable="widget.options.editable"
            :clearable="widget.options.clearable"
            :arrow-control="widget.options.arrowControl"
            :value-format="widget.options.format"
            :style="{width: widget.options.width}"
          />
        </template>

        <template v-if="widget.type==='date'">
          <el-date-picker
            v-model="dataModel"
            :type="widget.options.type"
            :placeholder="widget.options.placeholder"
            :start-placeholder="widget.options.startPlaceholder"
            :end-placeholder="widget.options.endPlaceholder"
            :readonly="widget.options.readonly"
            :disabled="widget.options.disabled"
            :editable="widget.options.editable"
            :clearable="widget.options.clearable"
            :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
            :format="widget.options.format"
            :style="{width: widget.options.width}"
          />
        </template>

        <template v-if="widget.type ==='rate'">
          <el-rate
            v-model="dataModel"
            :max="widget.options.max"
            :disabled="widget.options.disabled"
            :allow-half="widget.options.allowHalf"
          />
        </template>

        <template v-if="widget.type === 'color'">
          <el-color-picker
            v-model="dataModel"
            :disabled="widget.options.disabled"
            :show-alpha="widget.options.showAlpha"
          />
        </template>

        <template v-if="widget.type === 'select'">
          <el-select
            v-model="dataModel"
            :disabled="widget.options.disabled"
            :multiple="widget.options.multiple"
            :clearable="widget.options.clearable"
            :placeholder="widget.options.placeholder"
            :style="{width: widget.options.width}"
            :filterable="widget.options.filterable"
          >
            <el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value" />
          </el-select>
        </template>

        <template v-if="widget.type==='switch'">
          <el-switch
            v-model="dataModel"
            :disabled="widget.options.disabled"
          />
        </template>

        <template v-if="widget.type==='slider'">
          <el-slider
            v-model="dataModel"
            :min="widget.options.min"
            :max="widget.options.max"
            :disabled="widget.options.disabled"
            :step="widget.options.step"
            :show-input="widget.options.showInput"
            :range="widget.options.range"
            :style="{width: widget.options.width}"
          />
        </template>

        <template v-if="widget.type==='imgupload'">
          <el-upload
            class="upload-demo"
            :disabled="widget.options.disabled"
            :action="widget.options.action"
            :headers="headers"
            :file-list="widget.options.fileList"
            :on-success="uploadSuccess"
            :on-preview="handlePreview"
            :on-remove="removeFile"
            :on-exceed="exceedFile"
            limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </template>

        <template v-if="widget.type === 'editor'">
          <vue-editor
            v-model="dataModel"
            :style="{width: widget.options.width}"
          />
        </template>

        <template v-if="widget.type === 'cascader'">
          <el-cascader
            v-model="dataModel"
            :disabled="widget.options.disabled"
            :clearable="widget.options.clearable"
            :placeholder="widget.options.placeholder"
            :style="{width: widget.options.width}"
            :options="widget.options.remoteOptions"
          />
        </template>

        <template v-if="widget.type === 'text'">
          <span>{{ dataModel }}</span>
        </template>
      </el-form-item>
    </div>
  </div>
</template>

<script>

export default {
  props: ['widget', 'models', 'rules', 'remote'],
  data() {
    return {
      dataModel: this.models[this.widget.model],
      headers: {
        Authorization: localStorage.getItem('access_token')
      }
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models[this.widget.model] = val
        this.$emit('update:models', {
          ...this.models,
          [this.widget.model]: val
        })
        this.$emit('input-change', val, this.widget.model)
      }
    },
    models: {
      deep: true,
      handler(val) {
        this.dataModel = val[this.widget.model]
      }
    }
  },
  created() {
    if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
      this.remote[this.widget.options.remoteFunc]((data) => {
        this.widget.options.remoteOptions = data.map(item => {
          return {
            value: item[this.widget.options.props.value],
            label: item[this.widget.options.props.label],
            children: item[this.widget.options.props.children]
          }
        })
      })
    }

    if (this.widget.type === 'imgupload' && this.widget.options.isQiniu) {
      this.remote[this.widget.options.tokenFunc]((data) => {
        this.widget.options.token = data
      })
    }
  },
  methods: {
    uploadSuccess(res) {
      this.$message({
        type: 'success',
        message: '上传文件成功'
      })
      this.dataModel = res.id
    },
    removeFile() {
      this.$message({
        type: 'success',
        message: '删除文件成功'
      })
      this.dataModel = ''
    },
    exceedFile(res) {
      this.$message({
        type: 'error',
        message: '上传文件数量超出限制'
      })
    },
    handlePreview(file) {
      console.log(file)
      if (file.raw != null) {
      // 自己上传的，跳过
      } else {
      // 权限问题导致无法直接下载
        download(file.response.id, file.response.name)
      }
      // var url = settings.flowableTaskService + 'app/rest/content/' + file.response.id + '/raw'

    // window.open(url, '_blank', 'scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes')
    },
    refreshView(bindList) {
      this.$emit('refresh-view', bindList, this.widget.model)
    }
  }
}
</script>
